<template>
    <div style="height:100%;">
        <div class="parent" style="height:100%;">
        <div class="top">
            <top></top>
        </div>
        <div class="middle">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="bottom">bottom</div>
        </div>
    </div>
</template>
<script>
import top from './topNav'
export default {
    data() {
        return {
            
        }
    },
    components:{
        top
    }
}
</script>
<style>
.parent{display:flex;flex-direction:column;}
.top{height:60px;background:pink;}
.bottom{height:50px;background:rgb(233, 226, 227);}
.middle{flex:1;display:flex;}
.left{width:200px;background:rgb(112, 66, 66);}
.right{flex:1;overflow:auto;}
</style>